import { ITodoData } from "../types/typings";

class TodoDom {
    private static instance: TodoDom;
    // 使用create创建类的实例
    // 放todoitem的容器oTodoList
    private oTodoList: HTMLElement;
    constructor(oTodoList: HTMLElement) {
        this.oTodoList = oTodoList;
    }
    public static create(oTodoList: HTMLElement) {
        if (!TodoDom.instance) {
            TodoDom.instance = new TodoDom(oTodoList);
        }
        return TodoDom.instance;
    }
    public addItem(todo: ITodoData): Promise<void> {
        return new Promise<void>((resolve, reject) => {
            const oItem: HTMLElement = document.createElement("div");
            oItem.className = "todo-item";
            oItem.innerHTML = this.todoView(todo);
            this.oTodoList.appendChild(oItem);
            resolve();
        })
    }
    public removeItem(id: number): Promise<void> {
        return new Promise<void>((resolve, reject) => {
            const oItems: HTMLCollection = document.getElementsByClassName("todo-item");
            Array.from(oItems).forEach((oItem) => {
                const _id = parseInt(oItem.querySelector('button').dataset.id);
                _id === id && oItem.remove();
                resolve();
            })
        })
    }
    public toggleItem(id: number): Promise<void> {
        return new Promise<void>((resolve, reject) => {
            const oItems: HTMLCollection = document.getElementsByClassName("todo-item");
            Array.from(oItems).forEach((oItem) => {
                const oCheckbox: HTMLInputElement = oItem.querySelector('input');
                const _id = parseInt(oCheckbox.dataset.id);
                if (_id === id) {
                    const oContent: HTMLElement = oItem.querySelector('span');
                    oContent.style.textDecoration = oCheckbox.checked ? 'line-through' : '';
                    resolve();
                }
            });
        })
    }
    // 模板
    private todoView({ id, content, completed }: ITodoData): string {
        return `
            <input type="checkbox" ${completed ? 'checked' : ''} data-id="${id}"/>
            <span style="text-decoration: ${completed ? 'line-through' : ''}">${content}</span>
            <button data-id="${id}">删除</button>
        `;
    }
}
export default TodoDom;